<template>
	<view>
		<view class="culture" v-for="(item, index) in tutorials" :key="item.tutorialsId" @click="to(item.tutorialsId)">
			<text class="title">
				{{item.title }}
			</text>
			<u--text :lines="3" :text="item.txt"></u--text>
		</view>
	</view>
</template>

<script>
	import store from "@/store/index.js";
	import {
		mapState,
		mapMutations,
		mapActions,
		mapGetters
	} from "vuex";

	export default {
		name: "tutorials",
		data() {
			return {

			};
		},
		methods: {
			...mapMutations('course', ['getTutorials']),
			to(e) {
				console.log(e);
				uni.navigateTo({
					url: `/pages/index/tutorials-detail/tutorials-detail?id=${e}`,
				});
			},
		},
		computed: {
			...mapState('course', ['tutorials']),
		},
		created() {
			this.getTutorials()
		}
	};
</script>

<style scoped>
	.culture {
		width: 90vw;
		height: 30vw;
		margin: 0 auto;
		display: flex;
		background-color: #d8f3d3;
		margin-bottom: 40rpx;
		border-bottom: 3rpx solid (223, 226, 229);
		flex-direction: column;
		box-sizing: border-box;
		padding: 0 5vw;
	}

	.title {
		line-height: 10vw;
		text-align: center;
		font-weight: 900;
		font-size: 42rpx;
		width: 90vw;
		height: 10vw;
		/* background-color: aqua; */
		white-space: nowrap;
		text-overflow: ellipsis;
		margin-bottom: 10rpx;
	}
</style>